<!--这是供 场地 详情组件-->
<template>
  <div class="app-container">
    <el-form :model="postForm" v-loading="formLoading" :rules="rules" ref="postForm" label-width="220px" label-position="right">
      <p class="title">发布 供 项目</p>
      <el-form-item>
        <el-upload
          action=""
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="postForm.dialogVisible">
          <img width="100%" :src="postForm.dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="项目名称：" prop="name">
        <el-input v-model="postForm.name" placeholder="请输入项目名称（不超过20个字）" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="一句话简介：" prop="intro">
        <el-input v-model="postForm.itemIntro" placeholder="请输入一句话简介(不超过40个字)" style="width: 650px;"></el-input>
      </el-form-item>
      <el-form-item label="项目所在行业：" prop="trade">
        <el-select v-model="postForm.trade" clearable placeholder="请选择" style="width: 650px" @change="tradeSelect">
          <el-option v-for="item in tradeOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目所处阶段：" prop="stage">
        <el-select v-model="postForm.stage" placeholder="请选择" style="width: 650px" @change="stageSelect">
          <el-option v-for="item in stageOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在地区：" prop="place">
        <v-distpicker :province="postForm.citySelect.province" :city="postForm.citySelect.city" :area="postForm.citySelect.area" style="float: left;"></v-distpicker>
      </el-form-item>
      <el-form-item label="项目之前融资情况：" prop="financeSituation">
        <el-select v-model="postForm.financeSituation" placeholder="请选择" style="width: 650px" @change="financeSituationSelect">
          <el-option v-for="item in financeOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="此次希望资金：" prop="fiance">
        <el-input v-model="postForm.finance" placeholder="请填写此次希望资金" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="融资截止时间：" prop="endTime">
        <el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="预告时间" v-model="postForm.endTime" style="width:650px"></el-date-picker>
      </el-form-item>
      <el-form-item label="项目简介：">
        <el-input v-model="postForm.introDetail" placeholder="请详细介绍下你的项目(非必填，不超过100个字)" style="width: 650px;"></el-input>
      </el-form-item>
      <el-form-item label="公司名称：" prop="companyName">
        <el-input v-model="postForm.companyName" placeholder="请填写公司名称" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="所在地区：" prop="companyCity">
        <v-distpicker :province="postForm.companyCity.province" :city="postForm.companyCity.city" :area="postForm.companyCity.area" style="float: left;"></v-distpicker>
      </el-form-item>
      <el-form-item label="公司地址：" prop="address">
        <el-input v-model="postForm.address" placeholder="请填写公司地址" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="员工人数：" prop="employeeNum">
        <el-input v-model="postForm.employeeNum" placeholder="请填写员工人数（单位：人）" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="主要成员：" prop="mainMember">
        <el-input v-model="postForm.mainMember" placeholder="请填写该项目的主要负责人" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contact">
        <el-input v-model="postForm.contact" placeholder="请填写联系人" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="postForm.phone" placeholder="请填写联系方式" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="微信号：">
        <el-input v-model="postForm.wechatNum" placeholder="请填写微信号" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker' // 引入城市选择器插件

const postForm = {
  name: null, // 场地名称
  itemIntro: '', // 一句话简介
  trade: '', // 项目所在行业
  stage: '', // 项目所处阶段
  citySelect: { province: '福建省', city: '厦门市', area: '集美区' }, // 所在地区
  financeSituation: '', // 项目之前融资情况
  finance: '', // 此次希望资金
  endTime: '', // 融资截止时间
  introDetail: '', // 项目详细简介
  companyName: '', // 公司名称
  companyCity: { province: '福建省', city: '厦门市', area: '集美区' }, // 公司所在地区
  address: '', // 公司地址
  employeeNum: '', // 员工人数
  mainMember: '', // 项目主要成员
  contact: null, // 联系人
  phone: null, // 联系方式
  wechatNum: null, // 微信号
  dialogImageUrl: '',
  dialogVisible: false
}
const tradeOptions = [
  { id: 0, value: '互联网' },
  { id: 1, value: '医疗' },
  { id: 2, value: '文化旅游' },
  { id: 3, value: '高科技' },
  { id: 4, value: '房地产' },
  { id: 5, value: '金融' },
  { id: 6, value: '其他' }
]
const stageOptions = [
  { id: 0, value: '未开发' },
  { id: 1, value: '原型设计' },
  { id: 2, value: '产品开发' },
  { id: 3, value: '已上线' }
]
const financeOptions = [
  { id: 0, value: '未融资' },
  { id: 1, value: '天使轮' },
  { id: 2, value: 'A轮' },
  { id: 3, value: 'B轮' },
  { id: 4, value: 'C轮' },
  { id: 5, value: 'C轮以上' }
]

const rules = {
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  intro: [{ required: true, message: '请输入一句话简介', trigger: 'blur' }],
  trade: [{ required: true, message: '请选择项目所在行业', trigger: 'change' }],
  stage: [{ required: true, message: '请选择项目所处阶段', trigger: 'change' }],
  place: [{ required: true, message: '请选择地区', trigger: 'change' }],
  financeSituation: [{ required: true, message: '请选择项目之前融资情况', trigger: 'change' }],
  fiance: [{ required: true, message: '请输入希望资金', trigger: 'blur' }],
  endTime: [{ required: true, message: '请选择融资截止时间', trigger: 'blur' }],
  companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  companyCity: [{ required: true, message: '请选择公司所在城市', trigger: 'blur' }],
  address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
  employeeNum: [{ required: true, message: '请输入公司员工人数', trigger: 'blur' }],
  mainMember: [{ required: true, message: '请输入主要成员', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

export default {
  components: {
    VDistpicker
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, postForm),
      tradeOptions,
      stageOptions,
      financeOptions,
      rules,
      formLoading: false,
      btnLoading: false
    }
  },
  methods: {
    tradeSelect(val) {
    },
    stageSelect(val) {
    },
    financeSituationSelect(val) {
    },
    submitForm() {
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
</style>